/// <reference path="references.scss" />

$pd-offer-bg:                   $product-detail-addtocart-box-bg;
$pd-price-color:                $product-price-color;
$pd-price-offer-color:          $product-price-color;
$pd-line-height:                1.3;

$pd-offer-muted-color:          mix($body-color, $pd-offer-bg, 76%);
$pd-offer-spacing:              $grid-gutter-width / 2;

//
// Article Detail Styles
// --------------------------------------------------

.pd-section,
.pd-picture-block,
.pd-info,
.pd-offer {
    position: relative;
}

.pd-section {
    margin-bottom: 2rem;
}

.pd-data-col {
    // turn off flex 'cause of carousel
    display: block !important;
}

.pd-data-col-inner {
    position: sticky;
    top: 4px;
}

.pd-group {
    margin-bottom: 1rem;
    > * { margin-bottom: 0.125rem; }
}

.pd-description {
    color: $text-muted;
    line-height: 1.3;
}

.pd-tabs {
    margin-bottom: 1rem;

    > .nav-tabs {
        justify-content: center;
    }
}


// Gallery
// =====================================================

.pd-picture {
    display: block;
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 100%;
    text-decoration: none !important;
    outline: none !important;

    > img {
        position: absolute;
        max-width: 100%;
        max-height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}

.pd-section {
    .zoom-window-container {
        &:empty {
            display: none;
        }

        display: block;
        position: sticky;
        inset-inline: 0;
        top: 4px;
        z-index: $zindex-popover;
        margin: 0 calc(var(--gutter-x) * -.5);
        box-shadow: var(--box-shadow-md);
    }
}


// Info
// =====================================================
.pd-name {
    @include font-size(1.75rem);
    font-weight: $font-weight-bold;
}

.pd-name-sm {
    font-size: 1.25rem;
    font-weight: $font-weight-medium;
}

.pd-info .page-title {
    margin-bottom: 0;
}

.pd-brand {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: $font-weight-medium;
}

.pd-brand-picture {
    display: inline-block;
    max-width: 100%;
    height: auto;
    max-height: 32px;
}

.pd-attrs {
    :is(td, th[scope=row]) {
        padding: 0.2rem 0;
        vertical-align: middle;
        line-height: $pd-line-height;

        &:first-child {
            padding-inline-end: 1rem;
            font-weight: $font-weight-medium;
        }
    }
}

.pd-stock {
    &.pd-instock {
        color: darken($success, 10%);
    }
    &.pd-outofstock {
        font-weight: $font-weight-bold;
        color: $danger;
    } 
}

// Specification attributes
// =====================================================

.pd-specs-group .pd-specs-table {
    //font-size: 90%;
    font-size: $font-size-sm;
}

.pd-specs-table tr:first-child > :is(td, th) {
    border-top-width: 0;
}

.pd-spec-name {
    font-weight: $font-weight-medium;
    padding-inline-start: 0 !important;
    width: 20%;

    @include media-breakpoint-down(md) {
        width: 40%;
    }
}

.pd-spec-value {
    padding-inline-end: 0 !important;
}

// Reviews
// =====================================================

.pd-review-summary {
    line-height: $pd-line-height;
    > * { display: inline-block; }

    .pd-rating-box .rating {
        vertical-align: sub;
    }

    .pd-review-link {
        position: relative;
        font-weight: $font-weight-medium;
        &:before {
            content: '|';
            display: inline-block;
            padding: 0 0.5rem;
            color: $text-muted;
        }
    }
}

.pd-review-amount {
    // Award icon (.fa-award)
    --alert-icon-content: '\f559';
}


// Offer Box
// =====================================================

.pd-offer {
    --pd-finalprice-color: #{$pd-price-color};
    --pd-finalprice-offer-color: #{$pd-price-offer-color};
    --pd-offer-muted-color: #{$pd-offer-muted-color};
    --pd-finalprice-font-size: 1.8rem;
    --pd-finalprice-font-size-sm: 1.5rem;
    --pd-offer-font-size-base: inherit;
    --pd-offer-font-size-sm: #{$font-size-sm};

    background: $pd-offer-bg;
    padding: $pd-offer-spacing;
    line-height: $pd-line-height;
    width: 100%;
    border-radius: var(--border-radius-lg);
}

.row.pd-offer-actions {
    margin-left: -0.2rem;
    margin-right: -0.2rem;
    margin-top: auto;

    > * {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .pd-offer-action-qty {
        flex-shrink: 1;

        > .qty-input {
            min-width: 90px;
            max-width: 120px;

            &.qty-input-dropdown {
                max-width: 140px;
            }
        }
    }

    .quote-request {
        width: 100%;

        .quote-request-hotline {
            text-align: center;
            padding-top: .75rem;
        }
    }
}


// Prices
// =====================================================

.pd-offer-price {
    margin-bottom: 1rem;
}

.pd-price {
    font-size: var(--pd-finalprice-font-size, 1.8rem);
    font-weight: 500;
    color: $pd-price-color;

    &.pd-price-sm {
        font-size: var(--pd-finalprice-font-size-sm, 1.5rem);
    }
    &.pd-price--offer {
        color: $pd-price-offer-color;
    }
    &.pd-price--call {
        font-size: 1rem;
        color: $text-muted;
        font-weight: 400;
    }
    .badge {
        font-size: 100%;
        font-weight: initial;
    }
}

.pd-price-block + .pd-price-block {
    .pd-price {
        text-decoration: line-through;
        color: $pd-offer-muted-color;
        font-weight: 400;
    }
}

.pd-price-label {
    line-height: 1;
    font-weight: $font-weight-medium;
}

.pd-oldprice {
    display: inline-block;
    color: $text-muted;
    text-decoration: line-through;
}

.pd-saving-percent {
    font-weight: $font-weight-medium;
    color: $danger;
}

.pd-callforprice,
.pd-loginforprice {
    font-size: 1rem;
    color: $text-muted;
}

.pd-finalprice {
    display: flex;
    align-items: center;
}

.pd-finalprice-amount {
    font-size: var(--pd-finalprice-font-size, 1.8rem);
    font-weight: $font-weight-medium;
    color: var(--pd-finalprice-color);
    margin-inline-end: 0.75rem;
    white-space: nowrap;

    .pd-finalprice-offer & {
        color: var(--pd-finalprice-offer-color);
    }

    &.pd-finalprice-sm {
        font-size: var(--pd-finalprice-font-size-sm, 1.5rem);
    }
}

.pd-offer-countdown {
    font-size: var(--pd-offer-font-size-sm, 0.875rem);
    font-weight: $font-weight-normal;
    color: $warning;
    color: var(--warning-text-emphasis);
}

.pd-promoprice-group {
    font-size: var(--pd-offer-font-size-sm, 0.875rem);
}

.pd-promoprice-line {
    display: flex;
    color: var(--pd-offer-muted-color);
}

.pd-promoprice {
    display: inline-block;
    text-decoration: line-through;
}

.pd-promoprice-tip {
    margin-inline-start: 0.5rem;
    color: $gray-600 !important;
}

.pd-promosaving {
    display: inline-block;
}

.pd-saving-badge {
    margin-inline-start: 6px;
}

.pd-pangv,
.pd-legalinfo,
.pd-muted {
    color: var(--pd-offer-muted-color);
    font-size: var(--pd-offer-font-size-sm, 0.875rem);
}


// Tier prices
// =====================================================

.pd-tierprices {
    .table {
        background-color: #fff;
        margin-bottom: 0;
        font-size: $font-size-sm;
        overflow-x: auto;

        :is(th, td) { padding-inline: 0.5rem; }
        th { font-weight: $font-weight-medium; }
        .pd-tierprice-qty { font-weight: bold }
    }
}


// Bundles
// =====================================================

.pd-bundle-item {
    border-top: 1px solid $list-group-border-color;
    .form-group:last-child { margin-bottom: 0; }
}

.pd-bundle-item-name {
    font-weight: $font-weight-medium;
    > a { color: $body-color; }
}

.pd-bundle-item-description {
    @extend .pd-description;
}

.pd-bundle-item-offer {
    line-height: $pd-line-height;

    > * + * { margin-top: 0.5rem; }
}

.pd-bundle-price-offer {
    font-weight: $font-weight-medium;
    font-size: $font-size-lg;
}

.pd-bundle-price-regular {
    text-decoration: line-through;
    opacity: 0.7;
}

.pd-bundle-summary {
    display: inline-flex; 
    flex-direction: row; 
    align-items: center;
    flex-wrap: wrap;
}

.pd-bundle-summary-item {
    position: relative;
    line-height: $pd-line-height;
    padding: 0.2rem;
    a:hover {
        text-decoration: none;
    }
    &:after {
        display: inline-block;
        @include fontawesome-font("\f067", regular);
        padding: 0 0.2rem;
    }
    &:last-child:after {
        display: none;
        content: '';
    }
}


// Variants & Associated products
// =====================================================

.pd-variants:not(:last-child) {
    margin-bottom: 1.5rem;
}

.pd-variant {
    position: relative;
    padding: 0.5rem 0;

    .pd-name { font-size: 1rem !important }

    // Associated product's offer box should stretch vertically
    .pd-offer {
        display: flex;
        flex-direction: column;
    }
}


//
// Compare table
// ------------------------------------------------------

.table-compare {
    :is(td, th) {
        width: 20%;
    }
    
    th {
        font-weight: $font-weight-medium;
    }

    tbody {
        font-size: $font-size-sm;
    }
}


//
// Delivery times
// ------------------------------------------------------

.deliverytime-group .delivery-time {
    vertical-align: top;
    padding-inline-start: 0.4rem;
}

.delivery-time,
.delivery-date-block {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    @include text-truncate();
}

.delivery-time .delivery-time-status {
    font-size: 0.85em;
    padding-inline-end: 0.2rem;
    margin-inline-start: 0.025rem;
}

.pd-offer .delivery-date-block {
    // Looks bad
    //padding-top: 0.5rem;
}

.delivery-date > b {
    font-weight: $font-weight-medium;
}

.deliverytime-label {
    color: var(--pd-offer-muted-color);
}


// Secondary actions
// =====================================================

.pd-actions-container {
    margin-top: $pd-offer-spacing;
    padding-top: $pd-offer-spacing;
    border-top: 1px solid rgba(#000, 0.15);
}

.pd-actions-primary:not(:empty) {
    margin-bottom: $pd-offer-spacing;
    > *:not(:last-child) { margin-bottom: $pd-offer-spacing / 2;  }
}

.pd-actions {
    overflow-x: hidden;
    flex-wrap: nowrap;

    &.pd-actions-xl {
        overflow-x: auto;
    }

    .pd-action-item {
        text-align: center;
        border-inline-end: 1px solid rgba(#000, 0.15);
        padding-top: 6px; // for the transform
        padding-bottom: $focus-ring-width; // For visual focus
        &:last-child {
            border-color: transparent;
        }
        // When more than 4 action items are available,
        // .col is used instead of .col-(x). These need special care
        // concerning responsiveness.
        &.col .pd-action-label, &.col-2 .pd-action-label {
            display: none !important;

            @include media-breakpoint-only(sm) {
                display: block !important;
            }

            @include media-breakpoint-up(xl) {
                display: block !important;
            }
        }
    }

    .pd-action-link {
        display: inline-flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;

        .pd-action-icon {
            display: block;
            height: 20px;
            line-height: 20px;
            vertical-align: middle;
            color: $pd-offer-muted-color;
            transition: all 0.125s ease-out;
            transform-origin: bottom;
        }

        .pd-action-label {
            padding-top: 0.375rem;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &:hover .pd-action-icon {
            color: inherit;
            transform: scale(1.14);
        }
    }
}

// Available payment methods
// =====================================================

.pd-payment-icons-heading {
    border-bottom: 1px solid $gray-400;
}

.pd-available-payment-methods {
    display: grid;
    justify-content: space-between;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(48px, max-content));
    grid-auto-rows: minmax(36px, max-content);

    .payment-brand {
        width: 100%;
        height: 100%;
        margin: 0;
        box-shadow: none;
        outline: 1px solid rgba($black, .15);
    }
}

// Associated products
// =====================================================

.pd-assoc-list {
    display: flex;
    flex-flow: column;
    row-gap: 0.375rem;
}

.pd-assoc-header {
    background-color: rgba($black, .05);
    border-radius: var(--border-radius-md);
    transition: background-color 0.1s ease;

    &:hover {
        background-color: rgba($black, .1);
    }

    &.collapsed .collapse-chevron {
        transform: rotate(-180deg);
    }
}

.pd-assoc-title {
    padding: 0.75rem;

    .pd-qty-input-container {
        width: inherit;
        cursor: default;
    }

    .collapse-chevron {
        height: max-content;
    }
}

.pd-assoc-actions {
    display: flex;
    justify-content: flex-end;
    margin-inline-start: auto;
    max-width: 170px;
    width: 100%;
    min-width: 100px;
    padding: 0;

    .numberinput-group {
        overflow: initial;
    }

    :is(.numberinput, .qty-input-dropdown) {
        box-shadow: var(--box-shadow-xs);
    }
}

.pd-assoc-name {
    font-weight: $font-weight-medium;
}

.pd-assoc-img {
    align-self: center;
    width: 42px;
    margin-inline-end: 12px;
}

.pd-assoc-attr {
    @extend .text-truncate;
    font-size: $font-size-sm;
    text-align: center;
}

.pd-assoc-price {
    font-weight: $font-weight-medium;
    color: $pd-price-color;
    font-size: $font-size-base;
}